const tbody = document.querySelector("tbody");
const showModalBtn = document.querySelector(".show-modal-btn"); // 添加学员 - 显示模态框
const provinceDom = document.querySelector("[name=province]");
const cityDom = document.querySelector("[name=city]");
const countyDom = document.querySelector("[name=county]");
const addForm = document.querySelector(".add-form"); // 添加表单
const addModalLabel = document.querySelector("#addModalLabel"); // 添加表单 - 标题

// 打开页面做初始化工作
function init() {
  // 1 发送请求获取学员信息
  getStudentList();
  // 2 初始化省市区 组件
  // 2.1 动态获取省份信息
  getProvince();
  // 2.2 绑定change事件 。。。
  // 省份绑定change事件
  provinceDom.addEventListener("change", function () {
    getCity(provinceDom.value);
  });

  // 市绑定 change事件
  cityDom.addEventListener("change", async function () {
    // console.log(provinceDom.value);
    getCounty(provinceDom.value, cityDom.value);
  });
}

init();

async function getStudentList() {
  const result = await axios({ url: "/student/list" });
  console.log(result);
  const list = result.data.data;
  // reduce  累加
  // 1 数字求和
  // 2 字符串 拼接
  const html = list.reduce((prve, item) => {
    const {
      id,
      name,
      age,
      sex,
      group,
      phone,
      salary,
      truesalary,
      province,
      city,
      county,
    } = item;
    return (
      prve +
      `
    <tr>
        <th scope="row">${id}</th>
        <td>${name}</td>
        <td>${age}</td>
        <td>${sex}</td>
        <td>${group}</td>
        <td>${phone}</td>
        <td>${salary}</td>
        <td>${truesalary}</td>
        <td>${province + city + county}</td>
        <td>
          <button type="button" class="btn btn-primary btn-sm btn-update" data-id="${id}" >修改</button>
          <button type="button" class="btn btn-danger btn-sm">删除</button>
        </td>
      </tr>
    `
    );
  }, "");
  tbody.innerHTML = html;
}

// 添加学员-显示模态框 点击
showModalBtn.addEventListener("click", function (e) {
  $("#addModal").modal("show"); // 显示模态框
  addModalLabel.innerText = "新增学员信息";
});

// 添加表单 提交事件
addForm.addEventListener("submit", async function (e) {
  e.preventDefault();

  // 获取表单数据
  const data = serialize(addForm, { hash: true, empty: true });

  let result;

  // 判断 执行新增还是编辑
  if (addModalLabel.innerText === "新增学员信息") {
    // 删除id数据
    delete data.id;
    // 发送请求 完成学员提交
    result = await axios({ url: "/student/add", method: "post", data });
    // console.log(result);
  } else {
    // 发送请求 完成数据修改
    result = await axios({ url: "/student/update", method: "put", data });
  }

  if (result.data.code === 0) {
    toastr.success("操作成功");
    // 重置表单
    addForm.reset();
    // 关闭模态框
    $("#addModal").modal("hide");
    // 刷新数据
    getStudentList();
  }
});

// tbody 点击修改
tbody.addEventListener("click", async function (e) {
  // 判断当前点击是不是修改按钮
  if (e.target.classList.contains("btn-update")) {
    // 显示模态框
    $("#addModal").modal("show");
    // 标题
    addModalLabel.innerText = "编辑学员信息";
    // 获取id
    const id = e.target.dataset.id;
    const result = await axios({ url: "/student/one", params: { id } });
    const data = result.data.data;
    // 数据回填功能 -  填写回表单中 -  难点 - 性别-籍贯
    // 优化 遍历方式来统一实现 数据回填 - 不包含性别字段处理
    await getCity(data.province); // 异步
    await getCounty(data.province, data.city);
    // 获取到addForm标签里面所有的带name属性的dom元素
    const nameDomList = addForm.querySelectorAll("[name]"); // 也包含有 性别字段  也会包含有 id 字段
    nameDomList.forEach((dom) => {
      if (dom.name !== "sex") {
        addForm.querySelector(`[name=${dom.name}]`).value = data[dom.name];
      }
    });
    addForm.querySelector(`[name=sex][value=${data.sex}]`).checked = true;
  }
});

// 获取省份数据
async function getProvince() {
  const result = await axios({ url: "/geo/province" });

  provinceDom.innerHTML = result.data.reduce(
    (prev, item) => prev + `<option value="${item}">${item}</option>`,
    "<option value='' >--省--</option>"
  );
}
// 获取城市数据
async function getCity(pname) {
  const result = await axios({
    url: "/geo/city",
    params: { pname },
  });
  cityDom.innerHTML = result.data.reduce(
    (prev, item) => prev + `<option value="${item}">${item}</option>`,
    "<option value='' >--市--</option>"
  );

  // 还原 县
  countyDom.innerHTML = "<option value='' >--县--</option>";
}
// 获取县数据
async function getCounty(pname, cname) {
  const result = await axios({
    url: "/geo/county",
    params: { pname, cname },
  });
  countyDom.innerHTML = result.data.reduce(
    (prev, item) => prev + `<option value="${item}">${item}</option>`,
    "<option value='' >--县--</option>"
  );
}
